<template>
	<view>
		<view class="order bg-white radius padding margin-sm  bg-white flex justify-between">
			<view class="text-black">
				支付方式
			</view>
			<view>
				积分支付 <text class="lg text-gray cuIcon-right"></text>
			</view>
		</view>
		<view class="order bg-white radius padding margin-sm">
			<view class="content-c flex justify-between" style="align-items: center;">
				<view class="c-left flex" style="align-items: center;width: 80%;overflow: hidden;">
					<view class="cu-avatar radius  xl" :style="{ 'backgroundImage':'url('+ product.image +')' }"></view>
					<view class="margin-left-sm" style="width:70%;">
						<view class="margin-bottom-sm title text-cut text-bold text-black">
							{{product.name}}
						</view>
						<view class="margin-bottom-sm">
							x1
						</view>
					</view>
				</view>
				<view class="c-right margin-right-sm text-right">
					<text class="text-price margin-left-sm text-xl">{{product.sellScore}} 积分</text>
				</view>
			</view>
			
			<view class=" flex justify-between padding-tb-sm">
				<view class="text-black">
					充值账号
				</view>
				<view style="width: 80%;">
					<input type="text" value="" class="text-right" placeholder="(必填) 请填写充值账号" v-model="account" required/>
				</view>
			</view>
			
			<!-- <view class=" flex justify-between padding-tb-sm">
				<view class="text-black">
					通知手机号
				</view>
				<view style="width: 80%;">
					<input type="text" value="" class="text-right" placeholder="(选填) 用于通知下单成功消息通知" v-model="product.phone"/>
				</view>
			</view> -->
			
		</view>
		
		
		<view class="w-100 flex fixed bottom bg-white align-center padding justify-end">
			<view class="margin-lr-sm  flex align-center">
				<text>共1</text>件
				<text class="text-xl text-red text-price">{{product.sellScore}} 积分</text>
			</view>
			<button  class="round cu-btn text-white"  style="background-color: #fe5337;" @tap="submitOrder">提交订单</button>
		</view>
	</view>
</template>

<script>
	import request from '../../common/request';
	import common from 'common/common.js';
	export default {
		data() {
			return {
				product:{},
				phoneError: undefined,
				money:0,
				account:undefined, // 充值账户
				subProduct:{},// 提交的商品信息
				staff:{},// 用户信息
				products:[],
			}
		},
		onShow(){

		},
		async onLoad(options){
			// var staff ={
			// 	name:"孙恒",
			// 	userId:"SunHeng",
			// 	id:"42",
			// 	score:"120000"
			// }
			// uni.setStorageSync("staff", staff);
			
			this.staff = uni.getStorageSync("staff");
			console.log(this.staff)
			this.product = JSON.parse(decodeURIComponent(options.selectShop));
			console.log("结算页面的product")
			console.log(this.product)
		},
		methods: {
			validatePhone() {
				 this.phoneError = "";
				 const phoneNumberRegex = /^1[3456789]\d{9}$/;
			    // 在这里添加你的验证逻辑
				if(this.account == "" || this.account == undefined){
					this.phoneError = "充值账户不能为空!";
					return;
				}
				// if (this.product.phone && !phoneNumberRegex.test(this.product.phone)) {
				// 	this.phoneError = "手机号码错误";
				// 	this.product.phone = undefined;
				// 	return;
				// } else {
				//   this.phoneError = "";
				// }
				if(this.staff.score < this.product.sellScore){
					this.phoneError = "积分不足";
					return;
				}
			},
			submitOrder(){
				this.validatePhone(); 
				// 检查是否有验证错误、
				if (this.phoneError) {
				  // 如果有错误，不执行提交订单的逻辑
				  uni.showToast({
				  	title: this.phoneError,
				  	icon:"error"
				  })
				  return;
				}
				if("coupons" == this.product.type){
					uni.showLoading({ title: '加载中', mask: true });
					// // special: this.product.special, 
					// 卡劵下单
					uni.request({
						url: common.base_url +'/ems/order/creatOrder',
						data:{
							account: this.account,
							code: this.product.code,
							sellScore: this.product.sellScore,
							type: this.product.type,
							staffId: this.staff.id,
							stock: this.product.stock,
							productName: this.product.name,
							image: this.product.image,
						},
						header:{
						},
						method: 'POST',
						success: res => {
							if(res.code == 200){
								uni.navigateTo({
									url:'orderStatus?status=0'
								})
							} else{
								uni.showToast({
									title:res.data.msg,
									icon:"error"
								})
							}
							uni.hideLoading();
						},
						fail: function(e) {
							uni.hideLoading();
							uni.showToast({
								title:"唉哟，程序错误了["+JSON.stringify(e.msg)+"]",
								icon:"loading"
							})
							uni.navigateTo({
								url:'orderStatus'
							})
						},
					});
				}
				
				 this.products = [];
				// uni.redirectTo({
				// 	url:'../state/orderStatus'
				// })
			},
		}
	}
</script>

<style>
.w100{
	width: 100%;
}
.fixed{
	position: fixed;
	width: 100%;
}
.bottom{
	bottom: 0;
}
.cu-avatar{
	background-color: #FFFFFF;
}
.list{
	display: flex;
	flex-wrap: wrap;
}
.list view{
		display: flex;
		flex-wrap: wrap;
	}
</style>
<style lang="scss">
	.list{
		width: 100%;
		display: block;
		position: relative;
	}
	.sub-list{
		&.invalid{
			position: absolute;
			top: 0;
			left:100%;
			display: none;
		}
		&.showvalid{
			display: flex;
			animation: showValid 0.20s linear both;
		}
		&.showinvalid{
			display: flex;
			animation: showInvalid 0.20s linear both;
		}
		width: 100%;
		padding: 20upx 0 120upx 0;
		.tis{
			width: 100%;
			height: 60upx;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
		}
		.row{
			width: 92%;
			height: 18vw; 
			margin: 20upx auto 10upx auto;
			border-radius: 8upx;
			// box-shadow: 0upx 0 10upx rgba(0,0,0,0.1);
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;
			border: 0;
			.menu{
				.icon{
					color: #fff;
					font-size:50upx;
				}
				position: absolute;
				width: 28%;
				height: 100%;
				right: 0;
				justify-content: center;
				align-items: center;
				background-color: red;
				color: #fff;
				z-index: 2;
			}
			.carrier{
				background-color: #fff;
				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				flex-wrap: nowrap;
				.left{
					width: 100%;
					.title{
						padding-top: 3vw;
						width: 90%;
						margin: 0 5%;
						font-size: 36upx;
					}
					.term{
						width: 90%;
						margin: 0 5%;
						font-size: 26upx;
						color: #999;
					}
					position: relative;
					.gap-top,.gap-bottom{
						position: absolute;
						width: 20upx;
						height: 20upx;
						right: -10upx;
						border-radius: 100%;
						background-color: #f5f5f5;
					}
					.gap-top{
						top: -10upx;
					}
					.gap-bottom{
						bottom: -10upx;
					}
					.shixiao{
						position: absolute;
						right: 20upx;
						font-size: 150upx;
						z-index: 6;
						color: rgba(153,153,153,0.2)
					}
				}
				.right{
					flex-shrink: 0;
					width: 28%;
					color: #fff;
					background:linear-gradient(to right,#ec625c,#ee827f);
					&.invalid{
						background:linear-gradient(to right,#aaa,#999);
						.use{
							color: #aaa;
						}
					}
					justify-content: center;
					.ticket,.criteria{width: 100%;}
					.ticket{
						padding-top: 1vw;
						justify-content: center;
						align-items: baseline;
						height: 6vw;
						.num{
							font-size: 42upx;
							font-weight: 600;
						}
						.unit{
							font-size: 24upx;
						}
					}
					.criteria{
						justify-content: center;
						text-align: center;
						font-size: 28upx;
					}
					.use{
						width: 50%;
						height: 40upx;
						justify-content: center;
						align-items: center;
						font-size: 24upx;
						background-color: #fff;
						color: #ee827f;
						border-radius: 40upx;
						padding: 0 10upx;
					}
				}
			}
		}
	}
	
</style>
